<template>
  <div class="cart-list">
    <ul class="cart-item" v-for="item in list" :key="item.id">
      <li>
        <input
          type="checkbox"
          @change="onItemChange(item)"
          :checked="item.check"
          name=""
          id=""
        />
      </li>
      <li>
        <img :src="item.img" alt="" />
      </li>
      <li>
        {{ item.goodsName }}
        <span class="btn" @click="addItem(item)">+</span>
        <span class="btn">{{ item.count }}</span>
        <span class="btn" @click="removeItem(item)">-</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
  },
  methods: {
    onItemChange(item) {
      this.$emit('onItemChange', item)
    },
    addItem(item) {
      this.$emit('addItem', item)
    },
    removeItem(item) {
      this.$emit('removeItem', item)
    },
  },
}
</script>

<style></style>
